import { useState, useEffect } from "react";
import style from "./applyList.module.scss";
import { taskHistoryPage } from "@/api/instance";
import { useSearchParams } from "react-router-dom";
import { Form, Input, Button, Table, Modal, InputNumber } from "antd";
import TextArea from "antd/es/input/TextArea";
import FormItem from "antd/es/form/FormItem";
import { PlusOutlined } from "@ant-design/icons";
function ApplyList() {
  const [pageNum] = useState(1);
  const [searchParams] = useSearchParams();
  const [visible, setVisible] = useState(false);
  const instanceId = searchParams.get("id");
  const [pageSize] = useState(1000);
  const [form] = Form.useForm();
  const [tabColumns] = useState([
    {
      title: "任务名称",
      width: 100,
      dataIndex: "taskName",
    },
    {
      title: "创建时间",
      width: 120,
      dataIndex: "createTime",
    },
    {
      title: "审批时间",
      width: 120,
      render: (row) => {
        if (row.approveTime) {
          return row.approveTime;
        } else {
          return "--";
        }
      },
    },
    {
      title: "候选人/执行人",
      width: 100,
      render: (row) => {
        if (row.candidates) {
          return row.candidates;
        } else {
          return "--";
        }
      },
    },
    {
      title: "意见/备注",
      width: 100,
      render: (row) => {
        if (row.remark) {
          return row.remakr;
        } else {
          return "--";
        }
      },
    },
    {
      title: "签名",
      width: 100,
      render: (row) => {
        if (row.signature) {
          return row.signature;
        } else {
          return "--";
        }
      },
    },
    {
      title: "附件",
      width: 100,
      render: (row) => {
        if (row.attachment) {
          return row.attachment;
        } else {
          return "--";
        }
      },
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      render: (row) => (
        <>
          <div>
            {!row.finished ? (
              <a
                onClick={() => {
                  del(row.id);
                }}
              >
                指派
              </a>
            ) : null}
          </div>
        </>
      ),
    },
  ]);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    getPage(pageNum, pageSize);
  }, []);

  const getPage = (pageNo, size) => {
    let pageInput = {
      processInstanceId: instanceId,
    };
    pageInput.pageNum = pageNo;
    pageInput.pageSize = size;
    taskHistoryPage(pageInput).then((res) => {
      setDataSource(res.data);
      setTotal(res.total);
    });
  };

  const closeModal = () => {
    setVisible(false);
    form.resetFields();
    setId("");
  };

  return (
    <>
      <Modal
        title={"增加附言"}
        open={visible}
        onCancel={closeModal}
        width={"400px"}
      >
        <Form
          form={form}
          style={{ marginTop: "20px" }}
          initialValues={{}}
          labelAlign={"left"}
        >
          <FormItem name={"name"} label={"名称"}>
            <Input placeholder={"名称"} />
          </FormItem>
          <FormItem name={"age"} label={"年龄"}>
            <InputNumber
              min={"0"}
              style={{ width: "280px" }}
              placeholder={"年龄"}
            />
          </FormItem>
          <FormItem name={"remark"} label={"备注"}>
            <TextArea />
          </FormItem>
        </Form>
      </Modal>

      <div className={style.applyList}>
        <div className={style.content}>
          <div className={style.tabTools}>
            <span>任务详情</span>
            <Button
              icon={<PlusOutlined />}
              size="large"
              type={"primary"}
              onClick={() => {
                setVisible(true);
              }}
            >
              附言
            </Button>
          </div>
          <Table
            rowKey={"id"}
            columns={tabColumns}
            pagination={false}
            dataSource={dataSource}
          />
        </div>
      </div>
    </>
  );
}
export default ApplyList;
